<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript:核心语法+DOM （针对页面操作） +BOM（针对浏览器）
		     学习主体：针对页面操作比较多--------DOM操作
			 JQuery操作DOM： 理解：JQ框架改变页面内容效果
			 js基础就可以直接学习，了解函数的使用
			 基础函数----------事件源之后出现，事件源语法糖中
			 html()   作用：增加一个元素，覆盖原有的html面
			 val()    作用：针对input元素，实现修改文本框内容
			 text()   作用：生成文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
		 <style>
			 div.button{
				 width: 200px;
				 height: 200px;
				 background-color: #000;
			 }
			 h3{
				 
			 }
		 </style>
	</head>
	<body>
		<!-- 实现鼠标点击按钮，然后改变下面产生一行文本  -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus laudantium, ut repellendus suscipit qui ullam mollitia non totam iusto rerum unde id temporibus, doloribus earum nobis placeat quisquam? Quam, veritatis?</p>
		
		<div style="width: 200px;height: 200px; background-color: #000;"></div>
	    <h3>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit beatae esse saepe eveniet. Asperiores unde praesentium non provident perferendis ex, placeat id sint iusto tempora eveniet officia, magnam totam rerum.</h3>
		
		<input type="button" value="按钮2" />
		<input type="text" value="输入框可以直接写文本" />
		<script>
			$("button").click(function(){
				/*JQ操作DOM----html() 函数使用 */
				$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
			});
			/*练习1： div 200*200  背景颜色：黑色，鼠标划过之后，
			下面内容做修改：<h3> 提示：修改为黄颜色  */
			$("div").mouseenter(function(){
				$("h3").html("<h3>黄颜色</h3>");
			}); 
			/*练习2： 按钮  文本框   点击按钮，文本增加一行 */
			$("input[type='button']").click(function(){
				//alert("JQ选择器是否选中");
				$("input[type='text']").val("文本框内容修改~");
			});
			/*利用JQ操作DOM（页面效果）： 1.元素内容操作 （3个函数）
			                            .html()
										.val()
										.text()
			                           2.属性操作 （4个函数）
									   attr()
									   removeAttr()
									   prop()
									   removeProp()
									   3.样式类名操作（4个函数）
									   .deo{属性：属性值..}
									   addClass()
									   removeClass()
									   toggleClass()
									   hasClass()
									   4.元素样式操作（5个函数）
									   css()
									   语法：css("css属性"，"css属性值")
									   width()和height()
									   outerWidth()和outerHeight()
									   
									   $("选择器").attr().addClass()
									   5.插入和删除的元素 （7个函数）
									   append()和prepend()
									   after()和before()
									   remove()和empty()
									   replaceWith()
									   6.元素遍历操作（6个函数）
									   
									   7.JQ动画操作（7个函数）
			*/
		</script>
	</body>
</html>